<template>
    <div class="login">
        <div class="login-top">
          <router-link tag="span" to="/mine" class="iconfont go-back">&#xe7f6;</router-link>
          <span class="help">帮助</span>
        </div>
        <h1>欢迎登录美团</h1>
        <div class="cellphone">
             <span class="cellphone-attribution">+86
                 <i class="iconfont">&#xe617;</i>
             </span>
             <input class="cellphone-input" type="number" placeholder="请输入手机号" autofocus  v-model='telephone' 
             oninput="if(value.length > 11)value = value.slice(0, 11)"  @blur="tel" @keydown="focusing"
             >
             <i class="iconfont " :class="{clean:cleaning}" @click="remove">&#xe7f6;</i>
        </div>
        <div class="code-login" v-show="qiehuan">
            <div class="password-login">
                    <input type="password"  placeholder="请输入密码">
                    <i class="iconfont " :class="{eye1:seen}" @click="seening" v-if="seen">&#xe637;</i>
                    <i class="iconfont " :class="{eye2:noseeing}"  @click="seening" v-else>&#xe621;</i>
            </div>
            <button class="common" >登录</button>
            <div class="login-bottom">
                <span class="code" @click="toggle">验证码登录</span>
                <span class="forget-password">忘记密码</span>
            </div>
        </div>
         <div class="note-login" v-show="!qiehuan">
                <p class="tips">未注册的手机号验证后自动创建美团账户</p>
                <button class="common" :class="{active:isActive}" >获取短信验证码</button>
                <span @click="toggle">密码登录</span>
         </div>
        
        <div class="otherlogin">
                  <span class="iconfont wxlogin">&#xe658;</span>
                  <p class="agreement">登录代表你已同意美团用户协议、隐私政策</p>
        </div>
    </div>
</template>

<script>
export default {
    name:'MineLogin',
    data(){
        return{
            qiehuan:true,
            isActive:false,
            cleaning:false,
            noseeing:false,
            seen:true,
            telephone:'',
            
        }
        
    },
    methods:{
       toggle(){
               if(this.qiehuan == false){
                   this.qiehuan = true;
               }else{
                   this.qiehuan = false;
               }
       },
       tel(){
               var myreg=/^[1][34578][0-9]{9}$/ 
               if(myreg.test(this.telephone)){
                   this.isActive=true            
               }else{
                  this.isActive=false
               }
           },
        focusing(){
             if(this.telephone == null){
                 this.cleaning=false
             }else 
             {
                 this.cleaning=true
             }
        },
        remove(){
            this.telephone = "",
            this.cleaning=false,
            this.isActive=false
        },
        seening(){
                   if(this.seen == true){
                       this.noseeing=false
                    }else{
                       this.noseeing=true
                    }
          }
       }
    }
</script>

<style scoped>

.login{
    display:flex;
    width:100%;
    flex-direction: column;
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    right:0;
}
.login-top{
    display:flex;
    justify-content: space-between;
    padding:10px;
    color:#F0D89A;
}
 .login  .otherlogin {
     position: absolute;
     bottom: 10%;
     left:15%;
 }
 .login  .otherlogin   .wxlogin{
     font-size: 36px;
     color:#51C338;
     margin-left:40%;
 }
 .login  .otherlogin .agreement{
     font-size: 14px;
    text-align:center;
 }
.go-back{
    font-size:25px;
    color:#F0D89A;
}
.login h1{
    text-align: center;
    font-size:35px;
    font-weight: normal;
    margin-top:20%;
}
.cellphone{
    margin-left:15%;
    border-bottom:1px solid #C2C2C2;
    width:70%;
    height:40px;
    margin-top:5%;
    text-align: center;
    position: relative;
}
.cellphone .clean{
 position: absolute;
 color:#CCC;
 font-size:24px;
 right:5%;
 line-height:36px;
}

.cellphone-attribution{
    color:#F0D89A;
    line-height: 40px;
    left:2%;
    position: absolute;
}
.cellphone-attribution i{
    color:#C1C1C1;
}
.cellphone-input{
    outline: none;
    border:none;
    line-height: 36px;
    height:36px;
    left:25%;
    top:0;
    position: absolute;
    color:#ABABAB;
}
.password-login{
    width:70%;
    height:40px;
    margin-left:15%;
    position: relative;
}
.password-login input{
    width:100%;
    height:40px;
    left:0;
    top:0;
    position: absolute;
    outline: none;
    border:none;
    border-bottom:1px solid #C2C2C2;
}
.password-login .eye{
    margin-right:5%;
    position: absolute;
}
.common{
    width:70%;
    height:40px;
    background: #CCC;
    color:#fff;
    outline: none;
    border: none;
    border-radius: 40px;
    margin-top:10%;
    margin-left:15%;
    font-size: 20px;
}
.code-login .login-bottom{
    width:70%;
    height:30px;
    margin-left:15%;
    margin-top:10%;
    position: relative;
    color:#F0D89A;
}
.code-login .login-bottom .code{
    position:absolute;
    left:0;
  
}
.code-login .login-bottom .forget-password{
    right:0;
    position:absolute;
}
.note-login{
    position: relative;
}
.note-login .tips{
  font-size:14px;
  color:#C2C2C2;
  margin-left:15%;

}

.note-login span{
     color:#F0D89A;
     left:15%;
     bottom:-30%;
     position: absolute;
}
.active{
  background:red

}
.password-login .eye1,.eye2{
    color:red;
    font-size:24px;
    right:5%;
    line-height:36px;
}
</style>
